<template>
	<view class="pb-20">
		<view class="po-f wid20" style="top: 0;">
			<view class="ta-c" style="line-height: 100rpx;">
				<text class="fw-8 fz-9" style="color: #b7a650;">
					心意对象
				</text>
			</view>
		</view>
		<view class="pt-20">
			<view class="px-2">
				<view class="flex j_sb" style="flex-flow: row wrap;  ">
					<view class="mxy-5  " v-for="(item,index) in ImgSrc"
						:class="{'imgStyle':imageSelect.includes(index)}"
						style="border: 2px solid #fff; border-radius: 10px;">
						<u--image :radius="10" :showLoading="true" :src="JSON.parse(item.photo)[0].url" width="80px"
							height="80px" @click="clickImage(index)"></u--image>
						<view class="ta-c textStyle">
							<text style="color: #8c8b8b;" class="pl-1">
								1003{{item.id}}
							</text>
						</view>
					</view>
				</view>
			</view>

		</view>

		<view class="po-f wid20">
			<view class="pt-3 pb-2">
				<view class="px-10">
					<u-button type="primary" text="确定" @click="submit"></u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		msg,
		to,
		get
	} from "@/static/js/uilt/index.js";
	import {
		list_user,alike
	} from "@/static/js/api/choice.js"
	export default {
		data() {
			return {
				ImgSrc: [],
				imageSelect: []
			}
		},
		onShow() {
			this.getUserList()
		},
		methods: {
			async submit() {
				let data = {
					like: this.imageSelect.toString(),
					uid:get('userInfo').id
				}
				let res = await alike(data)
				if(res.code =='100')return 
				return setTimeout(() => {
					uni.switchTab({
						url: '/pages/Notice/Notice'
					});
				}, 500)
			},
			async getUserList() {
				let res = await list_user({
					uid: get('userInfo').id
				})
				this.ImgSrc = res.data
			},
			clickImage(i) {
				let index = this.imageSelect.indexOf(i)
				if (index != -1) {
					return this.imageSelect.splice(index, 1)
				}
				if (this.imageSelect.length > 2) return msg('心仪对象，不可超过3人')
				this.imageSelect.push(i)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.imgStyle {
		border: 2px solid #ff557f !important;
	}

	.wid20 {
		width: 100%;
		z-index: 10;
		// border: 1rpx solid red;
		bottom: 0rpx;
		background-color: #fff;
		height: 100rpx;
	}

	.textStyle {
		overflow: hidden;
		// border: 1px solid red;
		width: 150rpx;
		padding-top: 5rpx;
	}
</style>